<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="src/all.css" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>

<body>
    <div class="layui-fluid margin-top">
        <div class="layui-card">
            <div class="layui-card-body">
                <table class="layui-hide" id="test" lay-filter="test"></table>
            </div>
        </div>
    </div>
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container cl">
      <button class="layui-btn layui-btn-sm layui-top-add" lay-event="add">新建</button>
      <button class="layui-btn layui-btn-sm layui-top-warm" lay-event="edit">编辑</button>
      <button class="layui-btn layui-btn-sm layui-top-danger" lay-event="del">删除</button>
      <div class="layui-inline cl-select">
        <label for="" class="layui-form-label">关键字</label>
        <div class="layui-input-inline ">
          <input type="text" name='keyword' style='width:200px;' class="layui-input" placeholder="请输入关键字">
        </div>
      </div>
      <button class="layui-btn layui-btn-normal  layui-btn-sm  " lay-event="search"> 搜索 </button>
      <button  class="layui-btn layui-btn-primary layui-btn-sm" lay-event="refresh" >刷新 </button>
    </div>
     
  </script>
    <script type="text/html" id="barDemo">
        <a class="layui-link layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-link  layui-btn-xs" lay-event="del">删除</a>
    </script>
    <script src="layuiadmin/modules/axios.min.js"></script>
    <script src="layuiadmin/layui/layui.js"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
    <script>
    layui.config({
        base: 'layuiadmin/modules/'
    }).use(['main', 'notice'], function() {
        var table = layui.table,
            $ = layui.jquery,
            notice = layui.notice,
            axios = layui.main

        table.render({
            elem: '#test',
            url: '${cls.getrooturl()}?type=sel&tabid=${tabid}&mid=${mid}&job=${job}&tbname=${tbname}&T=领导考核_list_sql',
            height: 'full-40',
            cellMinWidth: 80,
            minWidth: 100,
            toolbar: '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
            defaultToolbar: ['filter', 'exports', 'print'],
            title: '用户数据表',
            cols: [
                [
                    { type: 'checkbox', fixed: 'left', rowspan: 2, },
                    { field: 'l_depart', title: '单位', align: 'center', rowspan: 2, },
                    { field: 'l_postjob', title: '职务', align: 'center', rowspan: 2, },
                    { field: 'l_name', title: '姓名', align: 'center', rowspan: 2, },
                    {
                        field: 'l_all_score',
                        title: '季度累计计分',
                        align: 'center',
                        sort: true,
                        rowspan: 2,
                        templet: function(d) {
                            let num = d.l_all_score * 1;
                            let color = '#fff';
                            let c = ''
                            if (num <= 3) {

                            }
                            if (num > 3 && num <= 6) {
                                color = '#e9df15';
                                c = '#fff'
                            }
                            if (num >= 9) {
                                color = '#BE5849';
                                c = '#fff'
                            }
                            return `<div style="background:${color};color:${c};">${num}</div>`
                        }
                    },
                    { title: '记分详情及来源', align: 'center', rowspan: 1, colspan: 9 },
                ],
                [

                    { field: 'l_month', title: '月份', align: 'center', rowspan: 1, },
                    { field: 'l_detail', title: '详情', align: 'center', rowspan: 1, },
                    { field: 'l_origin', title: '来源', align: 'center', rowspan: 1, },
                    { field: 'l_date', title: '日期', align: 'center', rowspan: 1, },
                    { field: 'l_bassis', title: '计分依据', align: 'center', rowspan: 1, },
                    { field: 'l_score', title: '计分', align: 'center', sort: true, rowspan: 1, },
                    { field: 'l_address', title: '地点', align: 'center', rowspan: 1, },
                    { field: 'createdate', align: 'center', title: '时间', width: 120, sort: true, rowspan: 1, },
                    { fixed: 'right', align: 'center', title: '操作', toolbar: '#barDemo', width: 140, rowspan: 1, }
                ]
            ],
            id: 'table',
            page: true
        });

        //头工具栏事件
        table.on('toolbar(test)', function(obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {

                case 'add':
                    parent.layer.open({
                        type: 2,
                        zIndex: layer.zIndex, //重点1
                        title: '新建',
                        shadeClose: true,
                        // shade: true,
                        maxmin: false, //开启最大化最小化按钮
                        area: ['90%', '90%'],
                        content: '${cls.getrooturl()}?type=addshow&tabid=${tabid}&mid=${mid}&job=${job}&tbname=${tbname}',
                        success: function(layero, index) {
                            var iframeWindow = window['layui-layer-iframe' + index]
                            var submitID = 'LAY-user-back-submit'
                            var input = layero.find('iframe').contents().find('#' + submitID);
                        },
                        end: function() {
                            table.reload('table', {}, false)
                        }

                    });
                    break;
                case 'edit':
                    var data = checkStatus.data;
                    if (data.length != 1) { notice.msg('请选择一条数据', { icon: 2 }); return }
                    layer.open({
                        type: 2,
                        zIndex: layer.zIndex, //重点1
                        title: '编辑',
                        shadeClose: true,
                        maxmin: false, //开启最大化最小化按钮
                        area: ['90%', '90%'],
                        content: '${cls.getrooturl()}?type=addshow&id=' + data[0].ids + '&tabid=${tabid}&mid=${mid}&job=${job}&tbname=${tbname}',
                        success: function(layero, index) {

                        },
                        end: function() {
                            table.reload('table', {}, false)
                        }
                    });
                    break;
                case 'del':
                    var data = checkStatus.data;
                    if (data.length < 1) { notice.msg('请选择数据', { icon: 2 }); return }
                    let idsarr = [];
                    for (var i = 0; i < data.length; i++) {
                        let obj = data[i]
                        idsarr.push(obj.ids);
                    }
                    layer.confirm('真的删除选中数据么', function(ler) {
                        axios({
                            url: '${cls.getrooturl()}?type=del&mid=${mid}&tabid=${tabid}&job=${job}&tbname=${tbname}',
                            method: 'post',
                             data:Qs.stringify({
                                id: idsarr.join(',')
                            }),
                        }).then(data => {
                            table.reload('table', {}, false)
                            layer.close(ler)
                        })
                    });
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(test)', function(obj) {
            var data = obj.data;
            //console.log(obj)
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function(index) {
                    axios({
                        url: '$cls.getrooturl()?type=del&id=' + data.ids + '&mid=$!{mid}&tabid=$!{tabid}&job=${job}&tbname=${tbname}',
                        method: 'post',
                        data: $("form").serialize(),
                    }).then(data => {

                        table.reload('table', {}, false)
                        layer.close(index)

                    })


                });
            } else if (obj.event === 'edit') {
                layer.open({
                    type: 2,
                    zIndex: layer.zIndex, //重点1
                    title: '编辑',
                    shadeClose: true,
                    maxmin: false, //开启最大化最小化按钮
                    area: ['90%', '90%'],
                    content: '${cls.getrooturl()}?type=addshow&id=' + data.ids + '&tabid=${tabid}&mid=${mid}&job=${job}&tbname=${tbname}',
                    success: function(layero, index) {

                    },
                    end: function() {
                        table.reload('table', {}, false)
                    }
                });
            }
        });

        function opener(option) {
            let { title, url } = option;
            layer.open({
                type: 2,
                zIndex: layer.zIndex, //重点1
                title: title,
                shadeClose: true,
                // shade: true,
                maxmin: false, //开启最大化最小化按钮
                area: ['90%', '90%'],
                content: url,
                success: function(layero, index) {
                    var iframeWindow = window['layui-layer-iframe' + index]
                    var submitID = 'LAY-user-back-submit'
                    var input = layero.find('iframe').contents().find('#' + submitID);
                },
                end: function() {
                    table.reload('table', {}, false)
                }

            });
        }
    });
    </script>
</body>

</html>